import React, { Component } from 'react'
import './PCMain.scss'
import CNs from 'classnames'
import { Link } from 'react-router-dom'
export default class PCMain extends Component {
  constructor() {
    super()
    this.state = {
      active: 1,
      old: 0,
      timer: -1
    }
  }
  render() {
    return (
      <div className="PCMain" style={{ htight: '100%', position: 'relative' }}>
        <div className="PContentS PCS1">
          <div className="PCS1D">
            <p className="PCS1Dp1">
              <span className="PCSDS1">蜂鸟配送</span>
              <span className="PCSDS2">传递品质生活</span>
            </p>
            <p className="PCS1Dp2">
              <small>百万骑手,优质服务,为您带来极致送达体验</small>
            </p>
          </div>
          <div className="PCS1J">
            <div className="PCS1Jl">
              <small className="small2">日均配送订单</small>
              <p className="PCS1JlP">
                <span className="PCS1Jlspan1">450</span>
                <span className="PCS1Jlspan2">万单</span>
              </p>
            </div>
            <div className="PCS1Jl">
              <small className="small2">日均配送订单</small>
              <p className="PCS1JlP">
                <span className="PCS1Jlspan1">450</span>
                <span className="PCS1Jlspan2">万单</span>
              </p>
            </div>
            <div className="PCS1Jl">
              <small className="small2">日均配送订单</small>
              <p className="PCS1JlP">
                <span className="PCS1Jlspan1">450</span>
                <span className="PCS1Jlspan2">万单</span>
              </p>
            </div>
          </div>
          <img
            src={require('./../../../../assets/Peisong/arrow-down-pc.png')}
            alt="滑动到下一页"
            className="PCS1img1"
          />
        </div>
        <div className="PContentS PCS2">
          <div className="PCS2D">
            <div className="PCS2D-title">
              <div
                // className="title-PCS2D title-PCS2D1 show"
                className={CNs({
                  show: this.state.active === 1,
                  'title-PCS2D': true,
                  'title-PCS2D1': true
                })}
              >
                <p>专业配送团队</p>
                <small>即时配送领域,市场占有率领先</small>
              </div>
              <div
                className={CNs({
                  show: this.state.active === 2,
                  'title-PCS2D': true,
                  'title-PCS2D2': true
                })}
              >
                <p>全品类、全时段、全覆盖</p>
                <small>
                  即时配送领域,服务品类涵盖外卖、商超、鲜花、蛋糕、文件等,提供全
                  <br />
                  段配送,配送服务覆盖全国1200多个城市
                </small>
              </div>
              <div
                className={CNs({
                  show: this.state.active === 3,
                  'title-PCS2D': true,
                  'title-PCS2D3': true
                })}
              >
                <p>准时必达、超时秒赔</p>
                <small>
                  蜂鸟优质配送服务、蜂鸟众包配送服务为您,市场占有率领先
                  带来极速送达体验
                </small>
              </div>
            </div>
            <div className="PCS2Dbtn">
              <span
                // className="PCS2DB1 PCS2DB"
                className={CNs({
                  active: this.state.active === 1,
                  PCS2DB1: true,
                  PCS2DB: true
                })}
                id="1"
                onClick={this.changeactive}
              ></span>
              <span
                // className="PCS2DB2 PCS2DB"
                className={CNs({
                  active: this.state.active === 2,
                  PCS2DB2: true,
                  PCS2DB: true
                })}
                id="2"
                onClick={this.changeactive}
              ></span>
              <span
                // className="PCS2DB3 PCS2DB"
                className={CNs({
                  active: this.state.active === 3,
                  PCS2DB3: true,
                  PCS2DB: true
                })}
                id="3"
                onClick={this.changeactive}
              ></span>
            </div>
            <div className="PCS2DS">
              <div className="PCS2DSG1 PCS2DSG">
                <img
                  src={require('./../../../../assets/Peisong/g11.png')}
                  alt="g11"
                  className={CNs({
                    show: this.state.active === 1,
                    g1: this.state.active === 1,
                    g11: true,
                    g1leave: this.state.active !== 1
                  })}
                />
                <img
                  src={require('./../../../../assets/Peisong/g12.png')}
                  alt="g12"
                  className={CNs({
                    show: this.state.active === 1,
                    g1: this.state.active === 1,
                    g12: true,
                    g1leave: this.state.active !== 1
                  })}
                />
                <img
                  src={require('./../../../../assets/Peisong/g13.png')}
                  alt="g13"
                  className={CNs({
                    show: this.state.active === 1,
                    g1: this.state.active === 1,
                    g13: true,
                    g1leave: this.state.active !== 1
                  })}
                />
                <img
                  src={require('./../../../../assets/Peisong/g14.png')}
                  alt="g14"
                  className={CNs({
                    show: this.state.active === 1,
                    g1: this.state.active === 1,
                    g14: true,
                    g1leave: this.state.active !== 1
                  })}
                />
                <img
                  src={require('./../../../../assets/Peisong/g15.png')}
                  alt="g15"
                  className={CNs({
                    show: this.state.active === 1,
                    g1: this.state.active === 1,
                    g15: true,
                    g1leave: this.state.active !== 1
                  })}
                />
              </div>
              <div className="PCS2DSG2 PCS2DSG">
                <img
                  src={require('./../../../../assets/Peisong/g21.png')}
                  alt="g21"
                  className={CNs({
                    show: this.state.active === 2,
                    g2: true,
                    g21: true,
                    g2leave: this.state.active !== 2
                  })}
                />
                <img
                  src={require('./../../../../assets/Peisong/g22.png')}
                  alt="g22"
                  className={CNs({
                    show: this.state.active === 2,
                    g2: true,
                    g22: true,
                    g2leave: this.state.active !== 2
                  })}
                />
                <img
                  src={require('./../../../../assets/Peisong/g23.png')}
                  alt="g23"
                  className={CNs({
                    show: this.state.active === 2,
                    g2: true,
                    g23: true,
                    g2leave: this.state.active !== 2
                  })}
                />
              </div>
              <div className="PCS2DSG3 PCS2DSG">
                <img
                  src={require('./../../../../assets/Peisong/g31.png')}
                  alt="g31"
                  className={CNs({
                    show: this.state.active === 3,
                    g31: true,
                    g3leave: this.state.active !== 3
                  })}
                />
              </div>
              <img
                alt=""
                src={require('./../../../../assets/Peisong/bg1.png')}
                className={CNs({
                  show: this.state.active === 1,
                  bg1: true,
                  bg: true
                })}
              />
              <img
                alt=""
                src={require('./../../../../assets/Peisong/bg2.png')}
                className={CNs({
                  show: this.state.active === 2,
                  bg2: true,
                  bg: true
                })}
              />
              <img
                alt=""
                src={require('./../../../../assets/Peisong/bg3.png')}
                className={CNs({
                  show: this.state.active === 3,
                  bg3: true,
                  bg: true
                })}
              />
              <img
                alt=""
                src={require('./../../../../assets/Peisong/person1.png')}
                className={CNs({
                  slidein: this.state.active === 1,
                  Person: true,
                  Person1: true,
                  slideout: this.state.old === 1
                })}
              />
              <img
                alt=""
                src={require('./../../../../assets/Peisong/person2.png')}
                className={CNs({
                  slidein: this.state.active === 2,
                  Person: true,
                  Person2: true,
                  slideout: this.state.old === 2
                })}
              />
              <img
                alt=""
                src={require('./../../../../assets/Peisong/person3.png')}
                className={CNs({
                  slidein: this.state.active === 3,
                  Person: true,
                  Person3: true,
                  slideout: this.state.old === 3
                })}
              />
              <img
                alt=""
                src={require('./../../../../assets/Peisong/box.png')}
                className="box show"
              />

              <ul>
                <span
                  className="PCS2DS-arrow1 arrow"
                  onClick={this.activereduce}
                ></span>
                <span
                  className="PCS2DS-arrow2 arrow"
                  onClick={this.activeadd}
                ></span>
              </ul>
            </div>
          </div>
        </div>
        <div className="PContentS PCS3">
          <div className="PCS31">
            <div className="PCS31C">
              <p className="PCS31CP1">合作品牌</p>
              <div className="PCS31C2">
                <div className="PCS31C2i PCS31C2i1">
                  <img
                    src={require('./../../../../assets/Peisong/shop1.png')}
                    alt="shop"
                  />
                </div>
                <div className="PCS31C2i PCS31C2i2">
                  <img
                    src={require('./../../../../assets/Peisong/shop2.png')}
                    alt="shop"
                  />
                </div>
                <div className="PCS31C2i PCS31C2i3">
                  <img
                    src={require('./../../../../assets/Peisong/shop3.png')}
                    alt="shop"
                  />
                </div>
                <div className="PCS31C2i PCS31C2i4">
                  <img
                    src={require('./../../../../assets/Peisong/shop4.png')}
                    alt="shop"
                  />
                </div>
                <div className="PCS31C2i PCS31C2i5">
                  <img
                    src={require('./../../../../assets/Peisong/shop5.png')}
                    alt="shop"
                  />
                </div>
                <div className="PCS31C2i PCS31C2i6">
                  <img
                    src={require('./../../../../assets/Peisong/shop6.png')}
                    alt="shop"
                  />
                </div>
                <div className="PCS31C2i PCS31C2i7">
                  <img
                    src={require('./../../../../assets/Peisong/shop7.png')}
                    alt="shop"
                  />
                </div>
                <div className="PCS31C2i PCS31C2i8">
                  <img
                    src={require('./../../../../assets/Peisong/shop8.png')}
                    alt="shop"
                  />
                </div>
                <div className="PCS31C2i PCS31C2i9">
                  <img
                    src={require('./../../../../assets/Peisong/shop9.png')}
                    alt="shop"
                  />
                </div>
                <div className="PCS31C2i PCS31C2i10">
                  <img
                    src={require('./../../../../assets/Peisong/shop10.png')}
                    alt="shop"
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="PCS32">
            <div className="PCS32O">
              <div className="PCS32OC">
                <p>你还在等什么,赶紧加入我们!</p>
                <small>
                  目前蜂鸟配送已服务100多万家商户和2.5万多个高端品牌。
                  <br />
                  配送服务覆盖1400多个大中小城市,已有超300万人加入了蜂鸟骑手行列。
                </small>
              </div>
              <div className="PCS32OB">
                <div className="d1">
                  <img
                    src={require('./../../../../assets/Peisong/join-business.png')}
                    alt="d1"
                  />
                  <Link
                    to="/Peisong/PContent/PCS"
                    className="btn1 btn"
                    onClick={this.changetoPCS}
                  >
                    我是商户
                  </Link>
                </div>
                <div className="d2">
                  <img
                    src={require('./../../../../assets/Peisong/join-delivery.png')}
                    alt="d2"
                  />
                  <Link to="/Peisong/PContent/PCP" className="btn2 btn">
                    成为骑手
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* <div className="PContentS PCS2"></div> */}
      </div>
    )
  }
  // 左箭头减小active
  activereduce = () => {
    clearTimeout(this.state.timer)
    if (this.state.active <= 1) {
      this.setState({
        old: 1,
        active: 3
      })
    } else {
      this.setState({
        old: this.state.active,
        active: this.state.active - 1
      })
    }

    setTimeout(() => {
      this.setState({
        old: 9999
      })
    }, 300)
    this.autolunbo()
  }
  // 右箭头增加active
  activeadd = () => {
    clearTimeout(this.state.timer)
    if (this.state.active >= 3) {
      this.setState({
        old: 3,
        active: 1
      })
    } else {
      this.setState({
        old: this.state.active,
        active: this.state.active + 1
      })
    }
    setTimeout(() => {
      this.setState({
        old: 9999
      })
    }, 300)
    this.autolunbo()
  }
  // 通过数字切换active
  changeactive = e => {
    var num = e.currentTarget.id
    console.log(num, this.state.active)
    if (num !== this.state.active.toString()) {
      clearTimeout(this.state.timer)

      this.setState({
        active: Number(num),
        old: this.state.active
      })
      setTimeout(() => {
        this.setState({
          old: 9999
        })
      }, 300)
      this.autolunbo()
    } else {
      return
    }
  }
  // 自动轮播
  componentDidMount() {
    window.scrollTo(0, 0)

    this.getchecked1()
    //获取地址信息
    this.autolunbo()

    //
  }
  getchecked1 = () => {
    var str = this.props.match.path
    var arr = str.split('/')
    const path = arr.pop()
    // console.log(path)
    switch (path) {
      case 'PCMain':
        localStorage.setItem('check', 1)
        break
      case 'PCS':
        localStorage.setItem('check', 2)
        break
      case 'PCP':
        localStorage.setItem('check', 3)
        break
      case 'PCPAW':
        localStorage.setItem('check', 4)
        break
      default:
        break
    }
  }
  componentWillUnmount() {
    clearTimeout(this.state.timer)
  }
  autolunbo = () => {
    clearTimeout(this.state.timer)
    var timer = setTimeout(() => {
      this.activeadd()
      this.autolunbo()
    }, 5000)
    this.setState({
      timer: timer
    })
  }
  changetoPCS = () => {
    localStorage.setItem('check', 2)
  }
}
